<template>
  <div class="main">
    <div class="query">
      <el-card>
        <el-form
          :inline="true"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <el-form-item label="城市:">
            <el-input placeholder="请输入城市" v-model="city_name"></el-input>
          </el-form-item>
          <el-form-item label="小区名:">
            <el-input placeholder="请输入小区名" v-model="area_name"></el-input>
          </el-form-item>
          <el-form-item label="关键字:">
            <el-input
              placeholder="请输入搜索房源信息"
              v-model="title"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="default"
              :disabled="title || city_name || area_name ? false : true"
              :icon="Search"
              @click="search"
            >
              搜索
            </el-button>
            <el-button type="primary" size="default" @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="list">
      <!-- 房源列表展示 -->
      <el-row gutter="20">
        <el-col
          v-for="house in houses"
          :key="house.house_id"
          :span="24"
          class="house-card-col"
        >
          <el-card :body-style="{ padding: '20px' }" shadow="hover">
            <!-- 房源内容 -->
            <div class="house-content">
              <!-- 房源图片 -->
              <div class="house-image">
                <img :src="house.img_url" alt="房源图片" />
              </div>

              <!-- 房源文字信息 -->
              <div class="house-info">
                <h3>{{ house.title }}</h3>
                <p class="sub-info">
                  <span>
                    {{ house.city_name }} {{ house.plot_name }} -
                    {{ house.area_name }}
                  </span>
                  <span>{{ house.rooms }}房 {{ house.halls }}厅</span>
                  <span>{{ house.area }}㎡</span>
                </p>
                <p class="sub-info">
                  <span>
                    朝向: {{ house.direction }} | 装修: {{ house.decoration }}
                  </span>
                  <span>{{ house.floor }}</span>
                </p>
                <p class="price-info">
                  <span>总价: {{ house.total_price }}万元</span>
                  <span>单价: {{ house.unit_price }}元/㎡</span>
                </p>
                <p class="additional-info">
                  <span>关注人数: {{ house.follow_number }}人</span>
                  <span>发布时间: {{ house.release_time }}</span>
                </p>
              </div>
              <div class="button-detail">
                <el-button type="primary" @click="viewDetails(house.house_id)">
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页控件 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalCount"
        @current-change="handlePageChange"
        layout="prev, pager, next, jumper"
      />
    </div>
    <!-- 房源详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="房源详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="house_info" class="dialog">
        <!-- 房源图片部分 -->
        <el-row gutter="{20}">
          <el-col :span="8">
            <div class="house-image">
              <img :src="house_info.img_url" alt="房源图片" />
            </div>
          </el-col>
          <!-- 房源文字信息部分 -->
          <el-col :span="16">
            <div class="house-info">
              <h3>{{ house_info.title }}</h3>
              <!-- 房源标题 -->
              <p>
                <strong>城市:</strong>
                {{ house_info.city_name }}
              </p>
              <p>
                <strong>小区名:</strong>
                {{ house_info.plot_name }}
              </p>
              <p>
                <strong>区域:</strong>
                {{ house_info.area_name }}
              </p>
              <p>
                <strong>房间数:</strong>
                {{ house_info.rooms }}房 {{ house_info.halls }}厅
              </p>
              <p>
                <strong>面积:</strong>
                {{ house_info.area }}㎡
              </p>
              <p>
                <strong>朝向:</strong>
                {{ house_info.direction }}
              </p>
              <p>
                <strong>装修:</strong>
                {{ house_info.decoration }}
              </p>
              <p>
                <strong>楼层:</strong>
                {{ house_info.floor }}
              </p>
            </div>
          </el-col>
        </el-row>

        <!-- 房源价格和其他信息 -->
        <el-row gutter="{20}" style="margin-top: 20px">
          <el-col :span="12">
            <div class="price-info">
              <p>
                <strong>总价:</strong>
                {{ house_info.total_price }}万元
              </p>
              <p>
                <strong>单价:</strong>
                {{ house_info.unit_price }}元/㎡
              </p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="additional-info">
              <p>
                <strong>关注人数:</strong>
                {{ house_info.follow_number }}人
              </p>
              <p>
                <strong>发布时间:</strong>
                {{ house_info.release_time }}
              </p>
            </div>
          </el-col>
        </el-row>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { reqHouseListAPI, reqHouseDetailAPI } from '@/api/predict/index'
import { ElNotification } from 'element-plus'

const houses = ref([])
const totalCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const title = ref<string>('')
const city_name = ref<string>('') // 新增城市输入框
const area_name = ref<string>('') // 新增小区名输入框
const house_info = ref()
const dialogVisible = ref(false)

// 重置按钮
const reset = () => {
  title.value = ''
  city_name.value = ''
  area_name.value = ''
  currentPage.value = 1 // 点击重置时，回到第一页
  fetchData() // 重置数据
}

// 搜索按钮
const search = async () => {
  await fetchData(currentPage.value) // 保持当前页，传递查询条件
}
// 请求数据并更新列表
// 请求数据并更新列表
const fetchData = async (page = 1) => {
  // 获取搜索参数
  const params = {
    page,
    title: title.value,
    city_name: city_name.value,
    area_name: area_name.value,
  }
  const res = await reqHouseListAPI(params) // 传递参数到后端API

  if (res.code === 200) {
    houses.value = res.data.results
    totalCount.value = res.data.total_count
  } else {
    ElNotification({
      message: res.error_msg,
      type: 'error',
    })
  }
}

// 组件加载完成后请求第一页数据
onMounted(() => {
  fetchData(currentPage.value)
})

// 分页切换
const handlePageChange = (page) => {
  currentPage.value = page
  fetchData(page)
}

const viewDetails = async (house_id: number) => {
  let res = await reqHouseDetailAPI(house_id)
  if (res.code === 200) {
    house_info.value = res.data
  } else {
    ElNotification({
      message: res.error_msg,
      type: 'error',
    })
  }
  dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .query {
    height: 80px;
    width: 100%;
    .form {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .list {
    height: 90%;
    .house-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .house-image {
      width: 150px;
      height: 100px;
      margin-right: 20px;
    }

    .house-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .house-info {
      flex: 1.5;
      display: flex;
      flex-direction: column;
    }
    .button-detail {
      flex: 0.5;
    }

    .house-info h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .sub-info,
    .price-info,
    .additional-info {
      font-size: 14px;
      color: #888;
      margin: 5px 0;
    }

    .sub-info span,
    .price-info span,
    .additional-info span {
      margin-right: 15px;
    }

    .price-info span {
      font-weight: bold;
      color: #f56c6c;
    }

    .house-card-col {
      margin-bottom: 20px;
    }
  }

  .dialog {
    .house-image img {
      width: 100%; /* 自适应宽度 */
      height: 200px; /* 固定高度 */
      object-fit: cover; /* 保持图片比例 */
    }

    .house-info {
      margin-top: 20px;
      font-size: 14px;
      color: #555;
    }

    .house-info h3 {
      font-size: 18px;
      margin-bottom: 15px;
      color: #333;
    }

    .house-info p {
      margin: 10px 0;
    }

    .house-info strong {
      color: #409eff;
    }

    .price-info,
    .additional-info {
      font-size: 14px;
      color: #555;
    }

    .price-info p,
    .additional-info p {
      margin: 10px 0;
    }

    .dialog-footer {
      text-align: center;
    }
  }
}
</style>
